<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane v-for="(item,index) in devices" :key="index" :label="item.name" :name="'device-' + index">
      <div>
        <state :rtu-port-displays="item.rtuPortDisplays" :device="item" :serialno="item.serialno" />
        <action :rtu-action-displays="item.rtuActionDisplays" :states="states" :serialno="item.serialno" />
        <trend v-if="getTrendShow(item)" :cserialno="item.serialno" :active-name="activeName" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'
import State from './components/State'
import Action from './components/Action'
import Trend from './components/Trend'
import { dclassCodeMap } from '@/utils/constant'
export default {
  components: {
    State,
    Action,
    Trend
  },
  data() {
    return {
      activeName: 'device-0',
      states: {},
      dclassCodeMap
    }
  },
  computed: {
    ...mapGetters(['currentDevice']),
    devices() {
      return this.currentDevice.devices
    }
  },
  methods: {
    getTrendShow(item) {
      // return false
      const rtuPortDisplays = item.rtuPortDisplays.filter(val => {
        return val.identity.indexOf('census') > -1
      })
      return rtuPortDisplays.length > 0
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
